import React, { Component } from 'react';
import {
  Button,
  Card,
  Col,
  Descriptions,
  Divider,
  Drawer,
  Form,
  Popconfirm,
  Row,
  Slider,
  Space,
  Switch,
  Table,
  Tag,
  message,
} from 'antd';
import SliderSelect from './SliderSelect';
import { connect } from 'umi';
import { values } from 'lodash';
class MonitorlevlDrawer extends Component {
  constructor(props) {
    super(props);
    this.levelForm = React.createRef();
  }

  submitFormInfo() {
    const { dispatch, makerDetail } = this.props;
    const levelForm = this.levelForm;
    let FormValues = {};
    try {
      const getFormData = levelForm.current.getFieldsValue();
      FormValues = { ...getFormData };
    } catch (e) {
      FormValues = undefined;
    }

    /**
     * 待修改，数据需要进一步处理
     */
    const thresholds = [FormValues];
    dispatch &&
      dispatch({
        type: 'monitorManage/updateMonitorInfo',
        payload: {
          ...makerDetail,
          thresholds,
        },
        callback: (res) => {
          if (res.code == 200) {
            message.success(`修改成功`);
            this.DrawerColse();
            this.props.handleRefreshData(); // 刷新列表
          } else {
            message.error(res.message);
          }
        },
      });
  }

  DrawerColse() {
    const { dispatch } = this.props;
    dispatch &&
      dispatch({
        type: 'monitorManage/changeMonitorlevlDrawer',
        payload: {},
      });
  }

  SetFormItemValue(name, value) {
    console.log(name, value);
  }

  render() {
    const { drawerVisible, makerDetail, dict } = this.props;
    const { thresholds } = makerDetail;
    return (
      <>
        <Drawer
          title={'断面污染物等级划定'}
          width={640}
          placement="right"
          closable={false}
          onClose={() => this.DrawerColse()}
          open={drawerVisible}
          footer={
            <Row style={{ float: 'right' }}>
              <Button
                type="primary"
                onClick={() => {
                  this.submitFormInfo();
                }}
              >
                提交
              </Button>
              <Button
                onClick={() => {
                  this.DrawerColse();
                }}
              >
                取消
              </Button>
            </Row>
          }
        >
          <Form ref={this.levelForm}>
            {thresholds &&
              thresholds.map((item, index) => {
                return (
                  <SliderSelect
                    key={index}
                    initialValue={item.value}
                    name={`${item.name}`}
                    label={dict[`${item.name}`]}
                  />
                );
              })}
            <Divider />
          </Form>
        </Drawer>
      </>
    );
  }
}

export default connect(({ monitorManage, global }) => ({
  dict: global.dict,
  drawerVisible: monitorManage.drawerVisible,
  makerDetail: monitorManage.makerDetail,
}))(MonitorlevlDrawer);
